<template>
  <div class="content">
    <div class="title" style="float: left;">
      出勤人数曲线
    </div>
    <div class="title right">
      <span
        :class="listQuery.dateType == '0' ? 'activeColor':'removeColor'"
        class="week"
        @click="change('0')"
      >本周</span>
      <span
        :class="listQuery.dateType == '1' ? 'activeColor':'removeColor'"
        class="month"
        @click="change('1')"
      >本月</span>
    </div>
    <div class="body">
      <div id="curve" style="width:100%;height:163px" />
    </div>
  </div>
</template>

<script>
import { attendanceCountData } from '@/api/autonym'
export default {
  data() {
    return {
      listQuery: {
        dateType: '0'
      },
      tableData: [],
      datax: [],
      datay: []
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  methods: {
    change(num) {
      if (num === '0') {
        this.listQuery.dateType = '0'
        this.getDetail()
      } else {
        this.listQuery.dateType = '1'
        this.getDetail()
      }
    },
    async getDetail() {
      const res = await attendanceCountData(this.listQuery)
      if (res.code === 200) {
        if (res.data) {
          this.datax = []
          this.datay = []
          this.tableData = res.data
          if (this.tableData) {
            this.tableData.forEach((val, index, arr) => {
              this.datax.push(val.date.split(' ')[0] || '')
              this.datay.push(val.count || '0')
            })
          }
        }
        this.$nextTick(function() {
          this.curveInit()
        })
      }
    },
    curveInit() {
      const myChart = this.$echarts.init(document.getElementById('curve'))
      const option = {
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '13%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#ffffff'
            }
          },
          data: this.datax
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            data: this.datay,
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#D29A00'
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#ffffff'
              }
            },
            symbolSize: 0
          }
          // {
          //   data: this.datay,
          //   type: 'line',
          //   smooth: true,
          //   itemStyle: {
          //     color: '#32C5FF'
          //   },
          //   symbolSize: 0
          // }
        ]
      }
      myChart.setOption(option, (window.onresize = myChart.resize))
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 16px;
  border-radius: 2px;
  border: 1px solid rgba(221, 221, 221, 0.2);
   .title{
    color: #ffffff;
  }
  .right{
    margin-left: 75%;
    display: flex;
    text-align: center;
    line-height: 31px;
    cursor: pointer;
    .week{
      width:60px;
      height:32px;
      border:1px solid rgba(210,154,0,1);
    }
    .month{
      width:60px;
      height:32px;
      border-radius:2px;
      border:1px solid rgba(210,154,0,1);
    }
  }
  .body {
    margin-top: 15px;
  }
}
.activeColor{
  background:rgba(210,154,0,1);
}
.removeColor{
  background:none;
}
</style>
